import { PageContainer } from "@ant-design/pro-components";
import {
  message,
  Spin,
  Card,
  Descriptions,
  Rate,
  Image,
  Table,
  ColorPicker,
  Tag,
  Divider,
} from "antd";
import { history } from "umi";
import { FC, useEffect, useState } from "react";
import styles from "./styles.less";
import { useParams } from "react-router-dom";
import Https from "@/utils/Https";
import { vipTypeList } from "@/utils/common";
import CourseRule from "./courseRule";
import { EffectiveType } from "@/constants";

const CourseDetails: FC<{}> = (props) => {
  const [courseInfo, setCourseInfo] = useState<any>({});
  const [loading, setLoading] = useState(false);
  const { courseType, id } = useParams();
  const [dataSourse, setDataSource] = useState([]);
  const [ClassInfo, setClassInfo] = useState([]);
  //获取详情信息
  const getDetails = async (id) => {
    setLoading(true);
    let res: any = await Https.post("/course/infoDetail", { id }, true);
    setLoading(false);
    if (res.code == 200 && res.data) {
      setCourseInfo(res.data);
      let useableVenueCourseList = res.data.useableVenueCourseList;
      let classInstructions = JSON.parse(res.data.classInstructions);
      if (useableVenueCourseList && useableVenueCourseList.length > 0) {
        useableVenueCourseList.map((item) => {
          if (item.vipType == 1) {
            item.deductNum = (item.deductNum / 100).toFixed(2);
          }
        });
        setDataSource(useableVenueCourseList);
      } else {
        setDataSource([]);
      }
      if (classInstructions && classInstructions.length > 0) {
        setClassInfo(classInstructions);
      } else {
        setClassInfo([]);
      }
    } else {
      setDataSource([]);
      message.error(res.msg);
    }
  };
  const columns = [
    {
      title: "卡信息",
      dataIndex: "vipcardName",
      render: (text, record) => {
        return (
          <span>
            {record.isUniversal == "1" && (
              <Tag style={{ marginRight: "8px" }} color="processing">
                通
              </Tag>
            )}
            {record.vipcardName}
            {
              <Tag style={{ marginLeft: "8px" }} color="purple">
                {record.vipCategory == "1" ? "" : "体验｜"}
                {vipTypeList[record.vipType].shortName}
              </Tag>
            }
          </span>
        );
      },
    },
    {
      title: "卡额度",
      dataIndex: "cardLimit",
      hideInSearch: true,
      render: (_, record) => {
        return record.vipType == 2 ? (
          "-"
        ) : (
          <span>
            {record.cardLimit
              ? record.vipType == 1
                ? Number(record.cardLimit) / 100 +
                  " " +
                  vipTypeList[record.vipType].status
                : record.cardLimit + vipTypeList[record.vipType].status
              : "-"}
          </span>
        );
      },
    },
    {
      title: "有效期",
      dataIndex: "effectiveValue",
      hideInSearch: true,
      render: (_, record) => {
        return record.effectiveType ? (
          <span>
            {record.effectiveValue}
            {EffectiveType[record.effectiveType].text}
          </span>
        ) : (
          "-"
        );
      },
    },
    {
      title: "收费信息",
      dataIndex: "deductNum",
      align: "center",
      render: (text, record, index) => {
        return record.vipType != 2 ? (
          <span>
            单节课收费:
            {record.deductNum}
            {vipTypeList[record.vipType].status}/人
          </span>
        ) : (
          "-"
        );
      },
    },
  ];
  useEffect(() => {
    if (id) {
      getDetails(id);
    }
  }, [id]);
  return (
    <PageContainer
      title={`课程详情 (${
        courseType == "1" ? "私教课" : courseType == "2" ? "团课" : "班课"
      })`}
      onBack={() => {
        history.push("/course/info", { courseType: courseType });
      }}
      className={styles.CourseDetails}
    >
      <Spin spinning={loading}>
        {courseInfo && (
          <>
            <Card
              title="课程信息"
              extra={
                <a
                  onClick={() => {
                    history.push(`/course/editDetails/${courseType}/${id}/1`);
                  }}
                >
                  编辑
                </a>
              }
            >
              <Descriptions>
                <Descriptions.Item label="课程名称">
                  {courseInfo.courseName}
                </Descriptions.Item>
                <Descriptions.Item label="课程时长">
                  {courseInfo.courseDuration}分钟
                </Descriptions.Item>
                <Descriptions.Item label="老师">
                  {courseInfo.courseCoachName}
                </Descriptions.Item>
                {courseType == "1" && (
                  <Descriptions.Item label="课时费">
                    {Number(courseInfo.classHourCost)
                      ? Number(courseInfo.classHourCost) / 100 + "元/节"
                      : "-"}
                  </Descriptions.Item>
                )}
                <Descriptions.Item label="课程难度">
                  <Rate disabled value={courseInfo.courseDifficulty} />
                </Descriptions.Item>
                {/* <Descriptions.Item label="所属场馆">
                  {courseInfo.venueName}
                </Descriptions.Item> */}
                <Descriptions.Item label="课程分类">
                  {courseInfo.courseCategoryNameStrList &&
                    courseInfo.courseCategoryNameStrList.length > 0 &&
                    courseInfo.courseCategoryNameStrList.map((item) => (
                      <Tag style={{ marginRight: "5px" }}>{item}</Tag>
                    ))}
                </Descriptions.Item>
                {courseType == "2" && (
                  <Descriptions.Item label="颜色">
                    <ColorPicker
                      showText
                      disabledAlpha
                      disabled
                      value={courseInfo.colour}
                    />
                  </Descriptions.Item>
                )}
              </Descriptions>
              <Descriptions>
                <Descriptions.Item label="课程封面">
                  {courseInfo.courseCoverUrl &&
                    courseInfo.courseCoverUrl.split(",") &&
                    courseInfo.courseCoverUrl.split(",").length > 0 &&
                    courseInfo.courseCoverUrl.split(",").map((item) => (
                      <a style={{ marginRight: "20px" }}>
                        <Image width={160} height={90} src={item} />
                      </a>
                    ))}
                </Descriptions.Item>
              </Descriptions>
              <Descriptions>
                <Descriptions.Item label="描述">
                  <div
                    className={styles.introduce}
                    dangerouslySetInnerHTML={{
                      __html: courseInfo.courseIntroduce,
                    }}
                  ></div>
                </Descriptions.Item>
              </Descriptions>
            </Card>
            <Card
              title="完善信息"
              style={{ marginTop: "20px" }}
              extra={
                <a
                  onClick={() => {
                    history.push(`/course/editDetails/${courseType}/${id}/2`);
                  }}
                >
                  编辑
                </a>
              }
            >
              <Descriptions title="上课说明设置" column={1}>
                {ClassInfo &&
                  ClassInfo.length > 0 &&
                  ClassInfo.map(
                    (item: { contentTtem: string; expound: string }, index) => (
                      <Descriptions.Item key={index} label={item.contentTtem}>
                        {item.expound || "无"}
                      </Descriptions.Item>
                    )
                  )}
              </Descriptions>
              <Descriptions title="预约流程设置" style={{ marginTop: "20px" }}>
                <Descriptions.Item label="约课流程">
                  {courseInfo.appointFlowList &&
                  courseInfo.appointFlowList.length > 0
                    ? courseInfo.appointFlowList.map((item, index) => (
                        <>
                          <span>{item.linkName}</span>
                          {index < courseInfo.appointFlowList.length - 1 && (
                            <span
                              style={{
                                margin: "0 8px",
                                color: "rgba(0, 0, 0, 0.45)",
                              }}
                            >
                              →
                            </span>
                          )}
                        </>
                      ))
                    : "无"}
                </Descriptions.Item>
              </Descriptions>
            </Card>
            <Card
              title="预约支付方式"
              style={{ marginTop: "20px" }}
              extra={
                <a
                  onClick={() => {
                    history.push(`/course/editDetails/${courseType}/${id}/3`);
                  }}
                >
                  编辑
                </a>
              }
            >
              <Descriptions>
                <Descriptions.Item label="是否线上付款">
                  {courseInfo.onlinePaymentFlag == 1 ? "是" : "否"}
                </Descriptions.Item>
                {courseInfo.onlinePaymentFlag == 1 && (
                  <Descriptions.Item label="付费预约">
                    {courseInfo.payAppoint == 1 ? "是" : "否"}
                  </Descriptions.Item>
                )}
              </Descriptions>
              {courseInfo.onlinePaymentFlag == 1 &&
                courseInfo.payAppoint == 1 && (
                  <Card title="付费预约" style={{ marginTop: "20px" }}>
                    <Descriptions>
                      <Descriptions.Item label="原价">
                        {Number(courseInfo.payOriginalPrice)
                          ? Number(courseInfo.payOriginalPrice) / 100 + "元/节"
                          : "-"}
                      </Descriptions.Item>
                      <Descriptions.Item label="优惠价">
                        {Number(courseInfo.payCouponPrice)
                          ? Number(courseInfo.payCouponPrice) / 100 + "元/节"
                          : "-"}
                      </Descriptions.Item>
                    </Descriptions>
                  </Card>
                )}
              {courseInfo.onlinePaymentFlag == 1 &&
                courseInfo.vipcardAppoint == 1 && (
                  <Card title="会员卡预约" style={{ marginTop: "20px" }}>
                    <Table
                      columns={columns}
                      dataSource={dataSourse}
                      pagination={false}
                      rowKey="id"
                      scroll={{ y: 500 }}
                    ></Table>
                  </Card>
                )}
            </Card>
            <CourseRule
              courseType={courseType}
              id={id}
              ruleType={courseInfo.appointRule}
            />
          </>
        )}
      </Spin>
    </PageContainer>
  );
};

export default CourseDetails;
